<!-- 分类页面 -->
<template>
  <div class="category">
    <div class="category-search"></div>
    <div class="category-container">
      <div class="category-container-left">
        <ul class="category-one">
          <li 
          :class="['item',current===index?'active':'']" 
          v-for="(item,index) in categoryList" 
          :key="item.id"
          @click="changeCategory(index,item.id)"
          >
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="category-container-right">
        <div class="right-top">
          <img class="img" :src="currentOne.banner_url" alt="">
        </div>
        <div class="middle-name">
          <van-divider class="divider-name">{{currentOne.name}}分类</van-divider>
        </div>
        <ul class="sub-category-container">
          <li 
          class="sub-item" 
          v-for="(item) in currentOne.subList" 
          :key="item.id"
          @click="goGoodsList(item.id,item.name)"
          >
            <img class="sub-item-img" :src="item.wap_banner_url" alt="">
            <div class="sub-item-name"> {{item.name}} </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  indexaction as indexactionApi,
  currentaction as currentactionApi,
} from '@/api/category'
export default {
  name: 'Category',
  data() {
    return {
      current:0,// 当前选中的 一级分类
      currentOne:{},// 二级分类对象
      categoryList:[]
    }
  },

  components: {},

  computed: {},
  // 组件被缓存后，组件第一次挂载时，会执行 created 钩子函数
  // 组件第二次被渲染时，created 不会被执行
  async created() {
   let res = await indexactionApi()
   this.categoryList = res.categoryList
   let res2 = await currentactionApi({id: this.categoryList[0].id})
   this.currentOne = res2.data.currentOne
  },

  // 组件被缓存时，有 activated,deactivated
  activated(){
    console.log("activeated...");
  },
  deactivated(){
    console.log("deactivated...");
  },

  mounted() {},

  methods: {
    async changeCategory(index,id){
      this.current = index
      let res2 = await currentactionApi({id})
      this.currentOne = res2.data.currentOne
    },
    goGoodsList(id,name){
      this.$router.push({name:'CategoryGoodsList',query:{id,name}})
    }
  }
}
</script>
<style lang='scss' scoped>
.category{
  // vh 相对单位 100vh 屏幕的高 vh相当%
  height: 100vh;
  &-search{}
  &-container{
    height: 100%;
    display: flex;
    &-left{
      height:100%;
      width:80px;
      // background-color: red;
      .category-one{
        height: 100%;
        list-style: none;
        .item{
          text-align: center;
          height: 50px;
          line-height: 50px;
          font-size: 12px;
          border-left: 2px solid transparent;  
        }
        .active{
          border-left-color: rgb(171,43,43);
          color:  rgb(171,43,43);
          font-size: 18px;
        }
      }
    }
    &-right{
      height:100%;
      flex:1;
      // background-color: green;
      .right-top{
        .img{
          width: 100%;
        }
      }
      .middle-name{
         display: flex;
         justify-content: center;
         .divider-name{
            width: 50%;
         }
         ::v-deep .van-divider{
            border-color: #000;
         }
      }
      .sub-category-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: first baseline;
        align-items: center;
        .sub-item{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          width: 33%;
          &-img{
            width: 60px;
            height: 60px;
          }
          &-name{
            font-size: 12px;

          }
        }
      }
    }
  }
}
</style>